<template>
<div class="detail-backgroud hue-flex align-items-end showSection-transition" 
style='background-position: 100%; 
background-image: url("https://p0.meituan.net/hotel/4f8a5a1f655487510faaebcab59fffba3583146.jpg");
 background-size: 100% 100%;'> 
    <div class="hue-flex-item" flex="3"> 
        <div class="header-title hue-block-whitespace"> 
            <p class="hue-ellipsis-l2 text-shadow"> 漫花庄园 </p>

             <div class="header-info"> 
                 <span class="header-album">
                  <span class="icon-travel_detail_photo-copy">
                      </span> 201张 </span> 
                      <span class="text-shadow"></span> 
                      </div>
                       </div>
                        </div> 
                        <div class="hue-flex-item text-right" flex="2"> 
                            <a class="introduce-button"> 
                                <span class="text-shadow">查看简介</span>
                             </a> 
                        </div> 
                    </div>
</template>

<script>
export default {
  name: "Travelphoto"
};
</script>

<style scoped>

.detail-backgroud {
    width: 100%;
    padding: .24rem;
    height: 4.2rem;
    background-color: #e0e0e0;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: 50%;
}
.showSection-transition {
    opacity: 1;
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.align-items-end {
    -webkit-box-align: end !important;
    align-items: flex-end !important;
}
.hue-flex {
    width: 100%;
    text-align: left;
    display: -webkit-box;
    display: -webkit-flex;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    /* box-align: center; */
    align-items: center;
}

.hue-flex [flex='3'].hue-flex-item {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    /* box-flex: 3; */
    flex: 3;
}
.hue-flex .hue-flex-item, .hue-flex [flex='1'].hue-flex-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    /* box-flex: 1; */
    flex: 1;
}
.hue-flex .hue-flex-item {
    box-sizing: border-box;
}
.header-title {
    font-size: 0.34rem;
    color: #fff;
    line-height: 0.44rem;
}
.text-shadow {
    text-shadow: 2px 2px 3px #222;
}
.hue-ellipsis-l2, .hue-ellipsis-l3 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
}
.hue-ellipsis-l2 {
    -webkit-line-clamp: 2;
}
.header-title .header-info {
    font-size: 0.24rem;
    margin-top: 0.1rem;
}
.header-title .header-info .header-album {
    background: rgba(0,0,0,.3);
    border-radius: .06rem;
    padding: .05rem .1rem;
    margin-right: 0.18rem;
}
[class*=' icon-'], [class^=icon-] {
    font-family: icomoon !important;
    /* speak: none; */
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.header-title .header-info .header-album {
    background: rgba(0,0,0,.3);
    border-radius: .06rem;
    padding: .05rem .1rem;
    margin-right: 0.18rem;
}
.text-shadow {
    text-shadow: 2px 2px 3px #222;
}
.hue-flex [flex='2'].hue-flex-item {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    /* box-flex: 2; */
    flex: 2;
}
.hue-flex .hue-flex-item, .hue-flex [flex='1'].hue-flex-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    /* box-flex: 1; */
    flex: 1;
}
.hue-flex .hue-flex-item {
    box-sizing: border-box;
}
.text-right {
   text-align: right;
   margin-right: 30px;
}
.introduce-button {
    color: #fff;
    padding: .04rem 0.07rem;
    border: 1px solid #fff;
    border-radius: .05rem;
    font-size: 0.26rem;
}
a {
    text-decoration: none;
}
[tabindex], a, area, button, input, label, select, textarea {
    touch-action: manipulation;
}
.text-shadow {
    text-shadow: 2px 2px 3px #222;
}





</style>
